<template>
  <div class="manually-box">
    <template v-for="item in props.formList" :key="item.key">
      <a-form-item v-if="item.type === 'textarea'" :label-col="{span: 24}" :label="item.label" :name="item.key" :colon="false">
        <a-textarea v-model:value="formValue[item.key]" placeholder="请输入" :rows="4" />
      </a-form-item>

      <a-form-item v-if="item.type === 'list'"
                   :label-col="{span: 24}" :label="item.label"
                   :name="item.key" :colon="false"
      >
        <a-row>
          <a-col :span="12" v-for="(val, index) in formValue.list" :key="index">
            <div class="box-ver-center">
              <div class="list-box box-ver-center">
                <div class="title-box">分数区间</div>
                <a-input-group compact>
                  <a-input
                    placeholder="最低"
                    v-model:value="val.minNumber"
                    style="width: 100px; text-align: center;border-right: 0;outline: none;"
                    @change="val => formatterValue(val, 'minNumber', index)"
                  />
                  <a-input
                    style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff"
                    placeholder="~"
                    disabled
                  />
                  <a-input
                    placeholder="最高"
                    v-model:value="val.maxNumber"
                    style="width: 100px; text-align: center; border-left: 0;outline: none;"
                    @change="val => formatterValue(val, 'maxNumber', index)"
                  />
                </a-input-group>
              </div>
              <div class="list-box box-ver-center">
                <div class="title-box-sub">等级</div>
                <a-input
                  v-model:value.number="val.level"
                  style="width: 100px;"
                  placeholder="得分等级"
                />
              </div>
              <a-button v-if="index <= 0" class="ml-10" type="primary" ghost @click="addListItem">添加</a-button>
              <a-button v-if="index > 0" class="ml-10" type="danger" ghost @click="deleteListItem(index)">删除</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form-item>

      <a-form-item v-if="item.type === 'table'"
                   :label-col="{span: 24}" :label="item.label"
                   :name="item.key" :colon="false"
      >
        <a-table :rowKey='record => record.id'
                 class="mt-10"
                 :dataSource="formValue.dataSource"
                 :columns="formValue.columns"
                 bordered
        >
          <template #name="{ record }">
            <a-textarea v-model:value="formValue.dataSource[record.key]" showCount :maxlength="100" />
          </template>
        </a-table>
      </a-form-item>
    </template>
  </div>
</template>

<script setup>
import {defineProps, reactive} from 'vue'
const props = defineProps({
  formList: {
    type: Array,
  }
})
const formValue = reactive({
  list: [
    {
      minNumber: '',
      maxNumber: '',
      level: ''
    }
  ],
  dataSource: [
    {
      id: 1,
      time: '2021-10-01',
      name: '123'
    }
  ],
  columns: [
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '授课',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
    }
  ]
})

const addListItem = () => {
  formValue.list.push({
    minNumber: '',
    maxNumber: '',
    level: ''
  })
}

const deleteListItem = (index) => {
  formValue.list = formValue.list.filter((v, i) => i !== index)
}

const formatterValue = ({target}, key, index) => {
  if (target.value && !isNaN(Number(target.value))) {
    if (key === 'minNumber' && formValue.list[index].maxNumber && Number(target.value) > formValue.list[index].maxNumber) {
      [formValue.list[index].minNumber, formValue.list[index].maxNumber] = [formValue.list[index].maxNumber, Number(target.value)]
    } else if (key === 'maxNumber' && formValue.list[index].minNumber && Number(target.value) < formValue.list[index].minNumber) {
      [formValue.list[index].minNumber, formValue.list[index].maxNumber] = [Number(target.value), formValue.list[index].minNumber]
    }
  } else {
    formValue.list[index][key] = 0
  }
}

</script>

<style lang="less" scoped>
.manually-box {
  /deep/.ant-form-item-label {
    padding: 4px 8px;
    background: #eaeaea;
    border-radius: 6px;
  }
  .list-box {
    padding: 10px 0;
    .title-box {
      width: 90px;
    }
    .title-box-sub {
      width: 40px;
    }
  }
}
</style>
